<template>
  <bfe-form ref="formObj" :rules="formRules" :model="formObj" label-position="top" class="container">
      <div class="row">
          <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
              <bfe-form-item :label="$t('stm.regulatory.baseInfo.amlIvsltRefno')" prop="amlIvsltRefno">
                  <bfe-input v-model="formObj.amlIvsltRefno" size="small" :maxlength="50" type="input" :disabled="disabled" :placeholder="$t('stm.common.pleaseInput')"></bfe-input>
              </bfe-form-item>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
              <bfe-form-item label="人民银行机构名称" prop="comptName">
                  <bfe-input v-model="formObj.comptName" size="small" type="input" :maxlength="50" :disabled="disabled" :placeholder="$t('stm.common.pleaseInput')"></bfe-input>
              </bfe-form-item>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
              <bfe-form-item label="人民银行联系人姓名" prop="comptCtperName">
                  <bfe-input v-model="formObj.comptCtperName" size="small" type="input" :maxlength="100" :disabled="disabled" :placeholder="$t('stm.common.pleaseInput')"></bfe-input>
              </bfe-form-item>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
              <bfe-form-item label="人民银行联系人部门名称" prop="comptCtperDeptName">
                  <bfe-input v-model="formObj.comptCtperDeptName" size="small" :maxlength="50" type="input" :disabled="disabled" :placeholder="$t('stm.common.pleaseInput')"></bfe-input>
              </bfe-form-item>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
              <bfe-form-item :label="$t('stm.regulatory.baseInfo.postDt')" prop="postDt">
                  <bfe-date-picker
                      v-model="formObj.postDt"
                      @change="(val) => getTxnDt(val, 'postDt')"
                      type="date"
                      :disabled="disabled"
                      :editable="false"
                      size="small"
                      style="width: 100%;"
                      :placeholder="$t('tooltip.please-select')"
                      format />
              </bfe-form-item>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
              <bfe-form-item :label="$t('stm.regulatory.baseInfo.fdbkCtofDt')" prop="fdbkCtofDt">
                  <bfe-date-picker
                      v-model="formObj.fdbkCtofDt"
                      @change="(val) => getTxnDt(val, 'fdbkCtofDt')"
                      type="date"
                      :disabled="disabled"
                      :editable="false"
                      size="small"
                      style="width: 100%;"
                      :placeholder="$t('tooltip.please-select')"
                      format />
              </bfe-form-item>
          </div>
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 multipleForm">
          <bfe-form-item :label="$t('stm.regulatory.baseInfo.scopeInvest')" prop="scopeInvest">
            <bfe-select v-model="formObj.scopeInvest" :disabled="disabled" :placeholder="$t('tooltip.please-select')" size="small" :appendToBody="false">
              <bfe-option
                v-for="item in surveyScopeCode"
                :key="item.key"
                :label="item.value"
                :value="item.key">
              </bfe-option>
            </bfe-select>
          </bfe-form-item>
        </div>
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
          <bfe-form-item :label="$t('stm.regulatory.baseInfo.tradeStDate')" prop="tradeStDate">
            <bfe-date-picker
              v-model="formObj.tradeStDate"
              @change="(val) => getTxnDt(val, 'tradeStDate')"
              type="date"
              :disabled="disabled"
              :editable="false"
              size="small"
              style="width: 100%;"
              :placeholder="$t('tooltip.please-select')"
              format />
          </bfe-form-item>
        </div>
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
          <bfe-form-item :label="$t('stm.regulatory.baseInfo.tradeEdDate')" prop="tradeEdDate">
            <bfe-date-picker
              v-model="formObj.tradeEdDate"
              @change="(val) => getTxnDt(val, 'tradeEdDate')"
              type="date"
              :disabled="disabled"
              :editable="false"
              size="small"
              style="width: 100%;"
              :placeholder="$t('tooltip.please-select')"
              format/>
          </bfe-form-item>
        </div>
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
              <bfe-form-item :label="$t('stm.regulatory.baseInfo.hdlnName')" prop="hdlnName">
                  <bfe-input v-model="formObj.hdlnName" size="small" :maxlength="200" type="input" :disabled="disabled" :placeholder="$t('stm.common.pleaseInput')"></bfe-input>
              </bfe-form-item>
          </div>
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
              <bfe-form-item :label="$t('stm.regulatory.baseInfo.survyRqs')" prop="survyRqs">
                  <bfe-input v-model="formObj.survyRqs" type="textarea" :maxlength="500" :disabled="disabled" :placeholder="$t('stm.regulatory.baseInfo.survyRqsTips')" :rows="2"></bfe-input>
              </bfe-form-item>
          </div>
      </div>
  </bfe-form>
</template>

<script>

import { mapState } from "vuex";
import _ from "lodash";
import moment from "moment";

export default {
props: {
  formObj: {
    type: Object,
    default: () => {}
  },
  type: {
    type: String,
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  },
  surveyScopeCode: {
    type: Array,
    default: () => []
  }
},
data(){
  return {
    formRules: {
      amlIvsltRefno: [{ required: true, message: this.$t('stm.common.pleaseInput'), trigger: 'blur' }],
      comptName: [{ required: true, message: this.$t('stm.common.pleaseInput'), trigger: 'blur' }],
      // comptCtperName: [{ required: false, message: this.$t('stm.common.pleaseInput'), trigger: 'blur,change' }],
      // comptCtperDeptName: [{ required: false, message: this.$t('stm.common.pleaseInput'), trigger: 'blur' }],
      postDt: [{ required: true, message: this.$t('stm.common.pleaseInput'), trigger: 'change' }],
      fdbkCtofDt: [{ required: true, message: this.$t('stm.common.pleaseInput'), trigger: 'change' }],
      scopeInvest: [{ required: true, message: this.$t('stm.common.pleaseSelect'), trigger: 'change' }],
      // scopeInvest: [{
      //     validator: (rule, value, callback) => {
      //     if(!(value && value.length)) {
      //         callback(new Error(this.$t('tooltip.please-select')))
      //     }
      //     callback()
      // }, 
      // required: true, 
      // trigger: 'change' }],
      tradeStDate: [{ required: true, message: this.$t('stm.common.pleaseInput'), trigger: 'change' }],
      tradeEdDate: [{ required: true, message: this.$t('stm.common.pleaseInput'), trigger: 'change' }],
      hdlnName: [{ required: true, message: this.$t('stm.common.pleaseInput'), trigger: 'blur' }],
      survyRqs: [{ required: true, message: this.$t('stm.common.pleaseInput'), trigger: 'blur' }],
    },
  }
},
computed: {
  language() {
    return this.$store.state.base.language
  },
},
activated() {
  if (typeof (this.$refs['formObj']) !== 'undefined') {
    this.$refs['formObj'].clearValidate()
  }
},
methods: {
  validateForm(){
    let flag = false
    this.$refs.formObj.validate((ok)=>{
      if(ok){
        flag = true
      } else{
        for(let item in this.formRules){
          let flag = false
          this.$refs.formObj.validateField(item, (errMsg)=>{
              if(!errMsg){
                  flag = true
              }
          })
          if(!flag){
              const str = this.formRules[item][0]['trigger'] === 'change' ? this.$t('stm.common.pleaseSelect') : this.$t('stm.common.pleaseInput')
              this.$message({
                  message:  str + this.$t('stm.regulatory.baseInfo.' + item),
                  type: 'warning'
              })
              break
          }
        }
      }
    })
    return flag
  },
  getTxnDt(val, str){
    this.formObj[str] = val
    if(val){
      this.$refs.formObj.clearValidate([str])

      let postDt = this.formObj?.postDt || ''
      let fdbkCtofDt = this.formObj?.fdbkCtofDt || ''
      let rcvDt = this.formObj?.rcvDt || ''
      let tradeStDate = this.formObj?.tradeStDate || ''
      let tradeEdDate = this.formObj?.tradeEdDate || ''

      if(str === 'postDt'){
        if (fdbkCtofDt !== '' && this.formObj.postDt > this.formObj.fdbkCtofDt) {
          this.formObj[str] = ''
          this.$message.warning(this.$t('stm.regulatory.baseInfo.fdbkCtofDtTips'))
          return
        }
        if (rcvDt !== '' && this.formObj.postDt > this.formObj.rcvDt) {
          this.formObj[str] = ''
          this.$message.warning(this.$t('stm.regulatory.baseInfo.postDtTips'))
          return
        }
      }

      if(str === 'fdbkCtofDt'){
        if (postDt !== '' && this.formObj.postDt > this.formObj.fdbkCtofDt) {
          this.formObj[str] = ''
          this.$message.warning(this.$t('stm.regulatory.baseInfo.fdbkCtofDtTips'))
          return
        }
        if (rcvDt !== '' && this.formObj.rcvDt > this.formObj.fdbkCtofDt) {
          this.formObj[str] = ''
          this.$message.warning(this.$t('stm.regulatory.baseInfo.rcvDtTips'))
          return
        }
      }

      if(str === 'tradeStDate'){
        if (tradeEdDate !== '' && this.formObj.tradeStDate > this.formObj.tradeEdDate) {
          this.formObj[str] = ''
          this.$message.warning(this.$t('stm.regulatory.baseInfo.tradeStDateTips'))
          return
        }
      }
      if(str === 'tradeEdDate'){
        if (tradeStDate !== '' && this.formObj.tradeStDate > this.formObj.tradeEdDate) {
          this.formObj[str] = ''
          this.$message.warning(this.$t('stm.regulatory.baseInfo.tradeStDateTips'))
          return
        }
      }
    }
  }
}
}
</script>

<style lang="less" scoped>
@import '../../../../style/stm.less';
/deep/ .giop-textarea.is-disabled .giop-textarea__inner {
background-color: rgba(0,0,0,.06);
border-color: rgba(0,0,0,.2);
color: rgba(0,0,0,.3);
color: #1f2c3d !important;
cursor: not-allowed;
}
.multipleForm{
/deep/.giop-select .giop-tag{
  margin: 2px 0 2px 6px;
  height: 20px;
  line-height: 18px;
}
}
</style>
